/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin');

module.exports = {
  darkMode: 'media',
  corePlugins: {
    preflight: false, 
  },
  content: [
    'index.{tsx,jsx,ts,js}',
    'src/**/*.{tsx,jsx,ts,js}',
    'components/**/*.{tsx,jsx,ts,js}',
  ],
  presets: [require('nativewind/preset')],
  safelist: [
    {
      pattern:
        /(bg|text|border)-(brand1|brand2|brand3|brand4|line1|line2|fill1|fill2|fill3|fill4|text1|text2|text3|text4|text5|text6|blue1|blue2|green1|green2|red1|red2|orange1|orange2|yellow1|yellow2)/,
    },
  ],
  theme: {
    extend: {
      boxShadow: {
        minimal: '0px 0px 2px 0px rgba(0, 0, 0, 0.08)',
      },
      colors: {
        brand1: {
          DEFAULT: 'var(--color-brand-1)',
        },
        brand2: {
          DEFAULT: 'var(--color-brand-2)',
        },
        brand3: {
          DEFAULT: 'var(--color-brand-3)',
        },
        brand4: {
          DEFAULT: 'var(--color-brand-4)',
        },
        line1: {
          DEFAULT: 'var(--color-line-1)',
        },
        line2: {
          DEFAULT: 'var(--color-line-2)',
        },
        fill1: {
          DEFAULT: 'var(--color-fill-1)',
        },
        fill2: {
          DEFAULT: 'var(--color-fill-2)',
        },
        fill3: {
          DEFAULT: 'var(--color-fill-3)',
        },
        fill4: {
          DEFAULT: 'var(--color-fill-4)',
        },
        text1: {
          DEFAULT: 'var(--color-text-1)',
        },
        text2: {
          DEFAULT: 'var(--color-text-2)',
        },
        text3: {
          DEFAULT: 'var(--color-text-3)',
        },
        text4: {
          DEFAULT: 'var(--color-text-4)',
        },
        text5: {
          DEFAULT: 'var(--color-text-5)',
        },
        text6: 'var(--color-text-6)',
        blue1: {
          DEFAULT: 'var(--color-blue-1)',
        },
        blue2: {
          DEFAULT: 'var(--color-blue-2)',
        },
        red1: {
          DEFAULT: 'var(--color-red-1)',
        },
        red2: {
          DEFAULT: 'var(--color-red-2)',
        },
        orange1: {
          DEFAULT: 'var(--color-orange-1)',
        },
        orange2: {
          DEFAULT: 'var(--color-orange-2)',
        },
        yellow1: {
          DEFAULT: 'var(--color-yellow-1)',
        },
        yellow2: {
          DEFAULT: 'var(--color-yellow-2)',
        },
      },
      fontFamily: {
        heading: ['DINPro-Bold'],
        body: ['DINPro-Medium'],
        mono: undefined,
        roboto: ['Roboto', 'sans-serif'],
      },
      fontWeight: {
        extrablack: '950',
      },
      fontSize: {
        '2xs': '10px',
      },
      boxShadow: {
        'hard-1': '-2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
        'hard-2': '0px 3px 10px 0px rgba(38, 38, 38, 0.20)',
        'hard-3': '2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
        'hard-4': '0px -3px 10px 0px rgba(38, 38, 38, 0.20)',
        'hard-5': '0px 2px 10px 0px rgba(38, 38, 38, 0.10)',
        'soft-1': '0px 0px 10px rgba(38, 38, 38, 0.1)',
        'soft-2': '0px 0px 20px rgba(38, 38, 38, 0.2)',
        'soft-3': '0px 0px 30px rgba(38, 38, 38, 0.1)',
        'soft-4': '0px 0px 40px rgba(38, 38, 38, 0.1)',
      },
    },
  },
  plugins: [
    plugin(function ({addComponents}) {
      addComponents({
        '.flex-center': {
          'align-items': 'center',
          'justify-content': 'center',
        },
        '.flex-between': {
          'align-items': 'center',
          'justify-content': 'space-between',
        },
      });
    }),
  ],
};
